<template>
  <b-col sm="10">
    <b-row class="justify-content-center text-center py-4">
      <b-col
        xl="6"
        class="pr-4"
      >
        <b-skeleton
          type="avatar"
          size="8rem"
          class="display-flex justify-content-center align-content-center"
        />
        <br>
        <b-skeleton
          width="25%"
          class="text-center mb-2"
        />
        <b-skeleton
          width="15%"
          class="text-center"
        />
        <br>
        <b-skeleton
          width="25%"
          height="8%"
          class="text-center"
          type="button"
        />
        <br>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
        <div class="d-flex flex-row mt-3">
          <b-skeleton
            width="50%"
          />
          <b-skeleton
            width="50%"
            class="ml-2"
          />
        </div>
      </b-col>
      <b-col
        xl="6"
        class="pl-4"
      >
        <b-skeleton
          width="30%"
          class="text-center  mt-4"
        />
        <br>
        <b-skeleton
          width="25%"
          height="8%"
          class="text-center mb-2"
          type="button"
        />
        <br>
        <b-skeleton
          width="30%"
          class="text-center"
        />
        <br>
        <b-skeleton
          class="text-center mb-2"
        />
        <b-skeleton
          class="text-center"
        />
        <br>
        <b-skeleton
          class="text-center mb-2"
        />
        <b-skeleton
          class="text-center"
        />
        <br>
        <b-skeleton
          class="text-center mb-2"
        />
        <b-skeleton
          class="text-center"
        />
        <br>
        <b-skeleton
          class="text-center mb-2"
        />
        <b-skeleton
          class="text-center"
        />
        <br>
        <b-skeleton
          class="text-center mb-2"
        />
        <b-skeleton
          class="text-center"
        />
      </b-col>
    </b-row>
  </b-col>
</template>

<style scoped>
 .b-skeleton {
    margin-left: auto;
    margin-right: auto;
  }

</style>
